<template>
    <div class="report">
        <line-head-form class="head" title="学业诊断" type="edit" />
        <el-form :inline="true" :model="form" class="t-form gray t-report-list">
            <el-form-item>
                <el-select v-model="form.baseTrimesterId" placeholder="请选择学期">
                    <el-option v-for="(term,index) in condition.termObj.list" :label="term.name" :value="term.id" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="form.dataTimeTypeId" placeholder="请选择类型">
                    <el-option v-for="(type,index) in types" :label="type.name" :value="type.code" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" class="search-btn">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="studentBox">
          <div class="s_icon">
            <img src="../../assets/img/s_icon.png"/>
          </div>
          <div class="s_name">{{studentInfo.studentName}}</div>
           <div class="s_no">{{studentInfo.studentNo}}</div>
        </div>
        <el-table class="line-table" :data="tableData" style="width: 100%" header-align="center" empty-text="暂无学生诊断">
            <el-table-column prop="examModelActivityName" label="活动名称" align="center" width="160"></el-table-column>
            <el-table-column prop="examModelName" label="试卷名称" align="center" width="160"></el-table-column>
            <el-table-column prop="dataTimeTypeName" label="类型" align="center" width="160"></el-table-column>
            <el-table-column prop="subjectName" label="科目" align="center">
            </el-table-column>
            <el-table-column prop="schoolName" label="校区" align="center"></el-table-column>
            <el-table-column prop="sectionName" label="年级" align="center"></el-table-column>
            <el-table-column prop="getScore" label="个人得分" align="center"></el-table-column>
            <el-table-column prop="createTime" label="报告日期" align="center">
                <template scope="scope">
                    {{scope.row.createTime | formatDate('YYYY-MM-DD H:mm:ss')}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <router-link tag="a"  target="_blank" :to="'/report-detail?reportId='+scope.row.reportId+'&studentName='+encodeURI(scope.row.studentName)">
                        <span class="btn-edit">查看详情</span>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>
        <v-pagination ref="pagin" class="pag" :total="reportObj.total|toNumber" @getListResult="reportStudentList" :currentPage="form.pageIndex"></v-pagination>
    </div>
</template>
<script>
import LineHeadForm from '../common/LineHeadForm'
import VPagination from "../common/Pagination"
import { mapState, mapActions } from 'vuex'
import io from 'lib/io'
export default {
    components: {
        LineHeadForm,
        VPagination
    },
    data() {
        return {
            types: [
                {
                    name: "期中",
                    id: "0"
                },
                {
                    name: "期末",
                    id: "1"
                }
            ],
            tableData: [],
            form: {
                pageIndex: 1,
                pageSize: 10,
                studentId: this.$route.query.studentId,
                baseTrimesterId: "",
                dataTimeTypeId: "",
            },
            reportObj: {},
            studentInfo: {},
        }
    },
    computed: {
        ...mapState(['condition']),
    },
    created() {

        this.form.studentId = this.$route.query.studentId
        this.studentInfo= {
           studentName : this.$route.query.name,
           studentNo :this.$route.query.studentNo
        }
        this.findBaseTermPage({ pageIndex: 1, pageSize: 1000000 })
        this.findTimeTypeData()
        this.reportStudentList()
    },
    methods: {
        ...mapActions(['findBaseTermPage']),
        search() {
            this.$refs.pagin.changePage(1)
            this.form.pageIndex = 1
            this.reportStudentList()
        },
        reportStudentList(opt) {
            let param = { ...this.form,...opt }
            io.post(io.reportStudentList, param, (ret) => {
                this.tableData = ret.list
                this.reportObj = ret
            })
        },
        findTimeTypeData() {
            let param = {}
            io.post(io.findTimeTypeData, param, (ret) => {
                this.types = ret
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~assets/stylus/mixin.styl'
.report
    padding-bottom 50px
    padding-top 20px
    .t-report-list
        padding-bottom 10px
.t-form
    table-form()
    margin-top 20px
    margin-bottom 30px
    .el-form-item
        margin-bottom 10px
.line-table
    .btn-edit
        cursor pointer
        color #0084bb
        padding 0 5px
        display inline-block
.studentBox
    background #D8F5FC
    min-width 14%
    height 30px
    display flex
    padding 0 8px 0 30px
    align-items center
    float left
    font-size 14px
    color #1F1E21
    .s_icon
        width 18px
        height 18px
        img
            width 100%
    .s_name
        padding  0 10px 0 15px
        border-right 2px solid #fff
    .s_no
         margin 0 0 0 10px
</style>
